import _ from 'lodash'
import {onMounted, onUnmounted, ref, watch} from "vue";

// def defPath
export function useMaskBak(props, emit) {

  // let interval = null;
  const elements = ref([]);
  // const masks = []; // 做多10个？
  let isResizing = false;

  let hoverElement = null;
  let resizeHandle = null;
  let startX, startY, startWidth, startHeight;

  // 创建高亮框和调整大小的手柄
  function createMask(el) {
    const mask = document.createElement("div");
    mask.className = "builder-mask";

    fixMaskPosition(mask, el)
    document.body.appendChild(mask);

    const resizeHandle = document.createElement("div");
    resizeHandle.className = "resize-handle";
    mask.appendChild(resizeHandle);

    // 监听拖拽调整大小
    resizeHandle.addEventListener("mousedown", (e) => {
      e.stopPropagation();
      isResizing = true;
      startX = e.clientX;
      startY = e.clientY;
      startWidth = masks[0].offsetWidth;
      startHeight = masks[0].offsetHeight;
      console.log(`----- mouse down ....`)
    });

    return mask;
  }

  const fixMaskPosition = (mask, el) => {
    const rect = el?.getBoundingClientRect();

    mask.style.left = `${ rect?.left }px`;
    mask.style.top = `${ rect?.top }px`;
    mask.style.width = `${ rect?.width }px`;
    mask.style.height = `${ rect?.height }px`;
  }

  const fixMaskSize = (mask, width, height) => {
    if(width) mask.style.width = `${ width }px`;
    if(height) mask.style.height = `${ height }px`;
  }

  // 更新高亮框位置
  function refreshMask(els) {
    /*let eList = els;
    if(!_.isArrayLike(els)) {
      eList = [ els ]
    }

    elements.value = eList;*/
  }

  const _refreshMask = _.throttle(() => {
    let els = elements.value;
    if(els?.length < masks.length) {
      let dels = masks.splice(els.length || 0);
      dels?.forEach(del => {
        del.remove();
      })
    }
    for(let i = 0; i < els.length; i++) {
      let el = els[i];
      let mask = masks[i];
      if(!mask) {
        mask = createMask(el);
        masks[i] = mask;
      }

      fixMaskPosition(mask, el)
      // 调整手柄位置（右下角）
      // resizeHandle.style.left = `${rect.width - 5}px`;
      // resizeHandle.style.top = `${rect.height - 5}px`;
    }
  }, 500)

  const clearMask = () => {
    let els = elements.value;
    els?.forEach(del => {
      del.remove();
    })
  }

  watch(() => elements.value, (els) => {
    _refreshMask()
  }, { deep: true })

  // 鼠标移动时检测当前 hover 的元素
  const mousemove = (e) => {
    if (isResizing) {
      // 调整元素大小
      const newWidth = startWidth + (e.clientX - startX);
      const newHeight = startHeight + (e.clientY - startY);

      fixMaskSize(masks[0], newWidth, newHeight);
    }

    /*const element = document.elementFromPoint(e.clientX, e.clientY);
    if (element && element !== document.body && element !== hoverElement) {
      hoverElement = element;
      updateHighlightBox(element);
    }*/
  }

  onMounted(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('resize', _refreshMask)
      window.addEventListener("mousemove", mousemove)
    }

    interval = setInterval(_refreshMask, 500)
  });

  onUnmounted(() => {
    window.removeEventListener('resize', _refreshMask)
    clearInterval(interval)
    interval = null;

    clearMask()
  });

  return {
    refreshMask,
    clearMask
  }
}
